PVI Online course logo

Web Page Design Module 1: Creating Web Pages with HTML Tags

Color
You can add color to several elements in an HTML file, by including color attributes in certain tags:

  • In the <body> tag, the bgcolor, text, link, vlink, and alink attributes define the colors for the page background, text, unvisited links, visited links, and active links (i.e. the moment the link is being clicked on).
  • To change text color for part of a page, use the <font> container tag with a color attribute.
  • To change the background color of a table, use the bgcolor (background color) attribute in the <table>, <tr>, <th>, and <td> tags.

Color attribute values take one of the following forms:

  • "#RRGGBB", where RR, GG, and BB are the red, green, and blue components of the color, in hex, ranging from 00 to FF.
  • Color names such as blue, gray, green, navy, etc.   

You can find a color chart that displays numerous colors in both formats by typing the phrase “hexadecimal color chart” into a search engine such as Google. Find a color chart and bookmark it or use the HTML color codes and names provided at http://www.computerhope.com/htmcolor.htm. Use the chart to change the background color of your web page. Add the bgcolor attribute to your current <body> tag.

<body bgcolor="lightblue"> or <body bgcolor="#ADD8E6">

Also add color to the rows or columns of your table. If you add color to a row you add the attribute to the <tr> tag.
<tr bgcolor="yellow"> or <tr bgcolor="#FFFF00">

If you add color to a column add the attribute to each of the <td> tags forming the column.
<td bgcolor="yellow"> or <td bgcolor="#FFFF00">

Experiment with adding color attributes to your <tr> and <td> tags. When you are finished adding color attributes replace your original html file by selecting File and then selecting Save. Close your Notepad file and navigate to your HTML file folder on your Google Drive. Select first webpage to preview what your file will look like in a web browser.

first webpage color

If your changes don't appear in the browser window, select the Refresh button. If your colors aren't displayed properly, return to Notepad, select the file and make the necessary corrections. If you need assistance completing this exercise preview the Screen Captured Video. You can also find a link to this video on your Student Resources page. When your image is displayed correctly, fine the assignment in your Google Classroom and MARK AS DONE. Send an email to your mentor with the Subject Line "Request for Help" if you need help finding the errors. When the assignment is complete, proceed with the Background Building Activities.
Back to Module 1 Building Tables Next Module 1 Background Building Activities